<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import commonModel from '@/http/modules/common.js'
import { Popup, Button, showConfirmDialog, showToast } from 'vant'
import SupplierSelection from './supplierSelection.vue'
const BIZPRODUCTCODE = '10217'
const selectionPopupShow = ref(false)
const selectedSupplierObj = ref({})
const router = useRouter()
const supplierShowList = ref([])
const popupSupplierModalHandle = () => {
  if (supplierShowList.value.length === 0) {
    showToast('暂无供应商可选择！')
    return
  }
  selectionPopupShow.value = !selectionPopupShow.value
}
const addSupplier = () => {
  window.location.href = `${
    import.meta.env.VITE_KYC_URL
  }/cross/addSupplier?token=${sessionStorage.token}&returnUrl=${escape(
    window.location.href
  )}&returl=${escape(window.location.href)}`
}
const backFillSupplier = (item) => {
  selectedSupplierObj.value = item
  popupSupplierModalHandle()
}
const next = () => {
  commonModel
    .gatewayApi({
      service: 'cb_supplier_check_account',
      bizContent: {
        payeeId: selectedSupplierObj.value.supplierId,
        bizProductCode: BIZPRODUCTCODE,
      },
      version: '1.0.0',
    })
    .then((result) => {
      if (result) {
        if (result.checkResult) {
          router.push('/payment/pay/' + selectedSupplierObj.value.supplierId)
        } else {
          showConfirmDialog({
            message: result.message,
            showCancelButton: false,
          })
            .then(() => {
              console.log('确定')
            })
            .catch(() => {
              console.log('取消')
            })
        }
      }
    })
}
const getSupplierList = () => {
  commonModel
    .gatewayApi({
      service: 'cb_supplier_list_query',
      bizContent: {
        pageNo: 1,
        pageSize: 10,
      },
      version: '1.0.0',
    })
    .then((result) => {
      if (result && result.dataList && result.dataList.length) {
        supplierShowList.value = result.dataList.slice(0, 3)
      }
    })
}
const checkSettingPwd = () => {
  commonModel
    .gatewayApi({
      service: 'cross_merchant_my_info',
      bizContent: {
        token: sessionStorage.getItem('token'),
      },
      version: '1.0.0',
    })
    .then((res) => {
      if (res) {
        if (res.shortPasswordIsSetStatus) {
          addSupplier()
        } else {
          showConfirmDialog({
            message: '为了保障您账户资金安全，请设置6位数字的交易密码。',
            showCancelButton: false,
          }).then(() => {
            window.location.href = `${
              import.meta.env.VITE_KYC_URL
            }/cross/faceVerify?token=${sessionStorage.token}&returnUrl=${escape(
              window.location.href
            )}&returl=${escape(window.location.href)}`
          })
        }
      }
    })
    .catch((error) => {
      showConfirmDialog({
        message: error.subMsg,
        showCancelButton: false,
      }).then(() => {
        router.push('/')
      })
    })
}
onMounted(() => {
  getSupplierList()
})
</script>

<template>
  <div class="payment_account">
    <Popup
      v-model:show="selectionPopupShow"
      position="top"
      round
      style="height: 100%"
    >
      <SupplierSelection
        :selectedSupplierObj="selectedSupplierObj"
        @popupSupplierModal="popupSupplierModalHandle"
        @backFillSupplier="backFillSupplier"
      />
    </Popup>
    <p class="payment_title">收款账户信息</p>
    <div class="payment_account_info" @click="popupSupplierModalHandle">
      <input
        type="text"
        placeholder="请选择供应商名称"
        disabled
        v-model="selectedSupplierObj.supplierMemberName"
      />
      <span class="p_icon"></span>
    </div>
    <div class="add_supplier" @click="checkSettingPwd">
      <span class="add-icon"></span>添加供应商收款账户
    </div>
    <div class="supplier_list" v-if="supplierShowList.length > 0">
      <div
        class="supplier_item"
        v-for="i in supplierShowList"
        :key="i.supplierId"
        @click="selectedSupplierObj = i"
      >
        <span
          :style="{
            color:
              selectedSupplierObj.supplierId === i.supplierId ? '#000' : '',
          }"
          >{{ i.supplierMemberName }}</span
        >
        <i
          v-if="selectedSupplierObj.supplierId === i.supplierId"
          class="iconfont icon-duigou"
        ></i>
      </div>
      <p class="supplier_more" @click="popupSupplierModalHandle">展示更多</p>
    </div>
    <div class="no-supplier" v-else>
      <p>暂无供应商</p>
    </div>
  </div>
  <Button
    class="next_btn"
    @click="next"
    native-type="submit"
    type="primary"
    :disabled="!selectedSupplierObj.supplierMemberName"
    >下一步</Button
  >
</template>
<style scoped lang="scss">
.payment_account {
  .no-supplier {
    display: flex;
    justify-content: center;
    color: #999999;
    padding: 0.2rem 0;
  }
  box-sizing: border-box;
  margin: 0.1rem 0.12rem;
  background-color: #fff;
  padding: 0.12rem;
  .payment_title {
    font-size: 0.16rem;
    font-weight: 500;
    color: #222222;
  }
  .payment_account_info {
    width: 100%;
    height: 0.48rem;
    border-bottom: 1px solid #eee;
    position: relative;
    input {
      position: absolute;
      background-color: #fff;
      bottom: 0.06rem;
      border: none;
      width: 100%;
    }
    .p_icon {
      position: absolute;
      right: 0;
      background: red;
      background-size: 100%;
      bottom: 0.12rem;
      width: 0.18rem;
      background-image: url('@/assets/img/search_member.png');
      height: 0.18rem;
    }
  }
  .add_supplier {
    margin-top: 0.12rem;
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #3f84f3;
    font-size: 0.14rem;
    justify-content: center;
    .add-icon {
      background-image: url('@/assets/img/supplier_add.png');
      display: inline-block;
      width: 0.12rem;
      height: 0.12rem;
      margin-right: 0.02rem;
      background-size: 100%;
    }
  }
  .supplier_list {
    margin-top: 0.24rem;
    .supplier_item {
      display: flex;
      justify-content: space-between;
      font-size: 0.14rem;
      width: 100%;
      height: 0.56rem;
      font-weight: 400;
      color: #999999;
      line-height: 0.56rem;
      margin-bottom: 0.06rem;
      border-bottom: 1px solid #eee;
      i {
        color: #3f84f3;
      }
      span {
        word-break: keep-all;
        overflow: hidden;
        overflow-x: auto;
        .inner-container::-webkit-scrollbar {
          display: none;
        }
      }
    }
    .supplier_more {
      text-align: center;
      font-weight: 400;
      color: #222222;
      font-size: 0.14rem;
      margin-top: 0.06rem;
    }
  }
}
.next_btn {
  display: block;
  @include wh(3.1rem, 0.48rem);
  border-radius: 0.24rem;
  margin: 0.5rem auto 0.1rem;
  border: none;
  color: #fff;
  background: #3f84f3;
}
</style>
